<template>
  <div>
    <ui-dialog :bg="bgColor" v-model="show">
      <div v-loading="loading" class="book-detail">
        <div :style="{ background: bgColor }" class="head">
          <div class="book">
            <div class="book-cover">
              <img :src="detail.coverImg" alt="" />
            </div>
            <div class="info">
              <p>{{ detail.bookName }}</p>
              <p>作者 : {{ detail.author }}</p>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="introduce">
            {{ detail.introduce }}
            <!-- 为什么我们做事总是急于求成、避难趋易？所谓有耐心，就是要“咬牙坚持、死磕到底”？如何不再用“三分钟热情”和“打鸡血”的方式做事？如何保持极度专注？如何消除焦虑？如何提高学习能力？这是一部可以穿透时间的个人成长方法论。7大底层概念，20个成长关键词，助你彻底走出焦虑与迷茫，拥有清醒的认知、清楚的目标、清晰的路径、清爽的情绪。通过“大脑构造、潜意识、元认知”等思维规律，你将真正看清自己；通过“深度学习、关联、反馈”等事物规律，你将真正看清世界，提升自控力、专注力、学习力……只有洞悉底层的内在规律，我们才能真正开启自我改变的原动力。 -->
          </div>
          <div v-if="note[0]" class="title">笔记&摘要</div>
          <div v-for="(item, index) in note" :key="index" class="note-item">
            {{ item.content }}
          </div>
        </div>
      </div>
    </ui-dialog>
  </div>
</template>

<script>
import ColorThief from "colorthief";
import uiDialog from "@/components/ui-dialog/ui-dialog.vue";

export default {
  components: {
    uiDialog,
  },
  name: "WorkspaceJsonBookDetail",
  mode: {
    prop: "value",
    even: "input",
  },
  props: {
    value: {
      default: false,
    },
    bookDetail: {
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      show: false,
      loading: false,
      detail: {},
      note: [],
      bgColor: "",
    };
  },
  watch: {
    value() {
      this.show = this.value;
    },
    show() {
      this.$emit("input", this.show);
    },
    bookDetail: {
      deep: true,
      async handler() {
        this.loading = true;
        if (!this.bookDetail.bookName) return;
        this.detail = this.bookDetail;
        this.note = this.bookDetail.note || [];
        const img = new Image();
        img.crossOrigin = "Anonymous";
        img.src = this.detail.coverImg;
        await new Promise((resolv, reject) => {
          img.onload = resolv;
        });
        const colorThief = new ColorThief();
        let color = colorThief.getPalette(img, 3);
        this.bgColor = `rgba(${color[0].join(",")},.9)`;
        this.loading = false;
      },
    },
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.book-detail {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  .head {
    padding-bottom: 1px;
  }
  .book {
    height: 120px;
    display: flex;
    padding: 0 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
    margin: 80px 20px 20px;
    background: #fff;
    border-radius: 8px;
    .book-cover {
      width: 105px;
      height: 140px;
      background: #fff;
      position: relative;
      top: -60px;
      padding: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
      border-radius: 6px;
    }
    .info {
      flex: 1;
      padding-left: 20px;
      padding-top: 10px;
      p {
        &:nth-child(1) {
          font-weight: 600;
          font-size: 18px;
          margin-top: 5px;
        }
        &:nth-child(2) {
          font-size: 14px;
          color: #999;
          margin-top: 5px;
        }
      }
    }
  }
  .introduce {
    color: #666;
    padding: 30px 25px 20px;
    text-align: justify;
    line-height: 28px;
  }
  .title {
    padding: 10px 25px;
    font-weight: 600;
  }
  .note-item {
    padding: 20px 10px;
    border-radius: 6px;
    background: #f5f5f5;
    margin: 0 20px 10px;
    color: #666;
    &:last-child {
      margin-bottom: 100px;
    }
  }
}
</style>
